{include file="common/header"/}
<div class="lemo-container">
    <div class="lemo-main">
        <div class="admin-main layui-anim layui-anim-upbit">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>分类列表</legend>
            </fieldset>
            <blockquote class="layui-elem-quote">
                <a data-href="{:url('add')}" class="layui-btn layui-btn-sm add">添加分类</a>
                <a class="layui-btn layui-btn-normal layui-btn-sm" onclick="openAll();">展开或折叠全部</a>
            </blockquote>
            <table class="layui-table" id="list" lay-filter="list"></table>
        </div>
    </div>
</div>

<script type="text/html" id="auth">
    <input type="checkbox" name="auth_open" data-href="{:url('ruleState')}" value="{{d.id}}" lay-skin="switch"
           lay-text="是|否" lay-filter="status" {{ d.auth_open== 0 ? 'checked' : '' }}>
</script>
<script type="text/html" id="status">
    <input type="checkbox" name="menu_status" data-href="{:url('ruleState')}" value="{{d.id}}" lay-skin="switch"
           lay-text="显示|隐藏" lay-filter="status" {{ d.menu_status== 1 ? 'checked' : '' }}>
</script>
<script type="text/html" id="order">
    <input name="{{d.id}}" data-id="{{d.id}}" class="list_order layui-input" value=" {{d.sort}}" size="10"/>
</script>
<!--<script type="text/html" id="icon">-->
<!--    <span class="icon {{d.icon}}"></span>-->
<!--</script>-->
<script type="text/html" id="imgtmp">
    <img src="{{ d.icon }}" width="50" height="50" onclick="showBigImage(this)">
</script>
<script type="text/html" id="action">
    <a class="layui-btn layui-btn-xs" data-href="{:url('edit')}?category_id={{d.id}}&id={{d.id}}" lay-event="edit">{:lang('edit')}</a>
    <a class="layui-btn layui-btn-xs layui-btn-warm" data-href="{:url('add')}?category_id={{d.id}}" lay-event="add">{:lang('add')}{:lang('child')}</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" data-href="{:url('del')}?id={{d.id}}" lay-event="del">{:lang('del')}</a>
</script>
<script type="text/html" id="topBtn">
    <a data-href="{:url('add')}" class="layui-btn layui-btn-sm" lay-event="add">{:lang('add')}分类</a>
</script>
{include file="common/footer"/}
<script>
    var tableIn = null, treeGrid = null, tableId = 'list', layer = null, Admin = null;

    layui.config({
        base: '/static/',
        version: true
    }).extend({
        treeGrid: 'plugins/layui/extend/treeGrid/treeGrid',
    }).use(['jquery', 'treeGrid', 'layer', 'form', 'upload'], function () {
        var $ = layui.jquery, form = layui.form;
        treeGrid = layui.treeGrid;
        layer = layui.layer;
        tableIn = treeGrid.render({
            id: tableId
            , elem: '#' + tableId
            , idField: 'id'
            , url: '{:url("index")}'
            , cellMinWidth: 100
            , treeId: 'id'//树形id字段名称
            , treeUpId: 'pid'//树形父id字段名称
            , treeShowName: 'title'//以树形式显示的字段
            , height: 'full-140'
            , isFilter: false
            // , iconOpen: true//是否显示图标【默认显示】
            ,isOpenDefault:false//节点默认是展开还是折叠【默认展开】
            , cols: [[
                {field: 'id', title: '序号', width: 70, fixed: true, type: 'numbers'},
                {
                    field: '', title: '图片', width: 150, align: 'center',
                    templet: '#imgtmp'
                },
                {field: 'title', title: '标题', width: 200},
                {title: '操作', width: 200, toolbar: '#action', align: "center", field: 'right'},
            ]]
            , page: false
        });
        treeGrid.on('tool(list)', function (obj) {
            var data = obj.data;
            var url = $(this).attr('data-href');
            if (obj.event === 'del') {
                layer.confirm('您确定要删除它吗?', function (index) {
                    loading = layer.load(1, {shade: [0.1, '#fff']});
                    $.post(url ? url : 'delete', {ids: [data.id]}, function (res) {
                        layer.close(loading);
                        layer.close(index);
                        if (res.code == 0) {
                            layer.msg(res.msg, {time: 1000, icon: 1});
                            obj.del();
                        } else {
                            layer.msg(res.msg, {time: 1000, icon: 2});
                        }
                    });
                });
            } else if (obj.event === 'add') {
                var iframe = layer.open({
                    type: 2,
                    content: url ? url : 'add',
                    area: ['800px', '600px'],
                    maxmin: true
                });
                layer.full(iframe);

            } else if (obj.event === 'edit') {

                var iframe = layer.open({
                    type: 2,
                    content: url ? url : 'edit',
                    area: ['600px', '800px'],
                    maxmin: true
                });
                layer.full(iframe);

            }

        });

    });
    layui.config({
        base: '/static/',
        version: true
    }).extend({
        Admin: 'admin/js/Admin',
    }).use(['Admin'], function () {
        Admin = layui.Admin
    });

    function openAll() {
        var treedata = treeGrid.getDataTreeList(tableId);
        treeGrid.treeOpenAll(tableId, !treedata[0][treeGrid.config.cols.isOpen]);
    }

    /**
     * @param e 图片对象
     */
    function showBigImage(obj) {
        var img = new Image();
        img.src = obj.src;
        var height = img.height + 50; //获取图片高度
        var width = img.width; //获取图片宽度
        var imgHtml = "<img src='" + obj.src + "' />";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px',height+'px'],
            shadeClose:true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }

</script>